﻿@using Beaver
@using Beaver.Dtos
@using Beaver.Dtos.Movies
@using Beaver.Models
@model IEnumerable<MovieQueryResponses>
@{
    ViewData["title"] = $"“{ViewBag.Name}”的搜索结果 - 小狸影视";
    var resultCount = Model?.Count() ?? 0;
}

<div class="search-container">
    <partial name="_MovieSearchPartial" model="@ViewBag.Name" />

    <div class="search-header">
        <div class="search-info">
            <h1 class="search-title">
                <i class="layui-icon layui-icon-search"></i>
                搜索结果
            </h1>
            @if (Model != null && Model.Any())
            {
                <p class="search-count">找到 <span class="count-highlight">@resultCount</span> 个关于 "<span class="keyword-highlight">@ViewBag.Name</span>" 的结果</p>
            }
        </div>
    </div>

    @if (Model != null && Model.Any())
    {
        <div class="search-results">
            @foreach (var item in Model)
            {
                <div class="search-result-card">
                    <a asp-area="" asp-controller="Home" asp-action="Detail"
                       asp-route-entId="@item.EnId" asp-route-catType="@item.CatId" class="result-link">
                        <div class="result-poster">
                            <img src="@item.Cover" alt="@item.Title" loading="lazy">
                            <div class="result-overlay">
                                <span class="play-icon">
                                    <i class="layui-icon layui-icon-play"></i>
                                </span>
                            </div>
                        </div>

                        <div class="result-content">
                            <div class="result-header">
                                <h2 class="result-title">@Html.Raw(item.Title)</h2>
                                <div class="result-meta">
                                    <span class="meta-item category">
                                        <i class="layui-icon layui-icon-app"></i>
                                        @item.CatName
                                    </span>
                                    <span class="meta-item year">
                                        <i class="layui-icon layui-icon-date"></i>
                                        @item.Year
                                    </span>
                                </div>
                            </div>

                            <div class="result-description">
                                <p>@item.Description</p>
                            </div>

                            <div class="result-footer">
                                <span class="view-detail">
                                    查看详情
                                    <i class="layui-icon layui-icon-right"></i>
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            }
        </div>
    }
    else
    {
        <div class="no-results">
            <div class="no-results-icon">
                <i class="layui-icon layui-icon-face-cry"></i>
            </div>
            <h2 class="no-results-title">未找到相关内容</h2>
            <p class="no-results-desc">
                没有找到与 "<span class="keyword-highlight">@ViewBag.Name</span>" 相关的影视作品
            </p>
            <div class="search-suggestions">
                <p>建议：</p>
                <ul>
                    <li>检查关键词拼写是否正确</li>
                    <li>尝试使用更简短的关键词</li>
                    <li>使用影片的别名或英文名搜索</li>
                </ul>
            </div>
        </div>
    }
</div>

<style>
    /* 搜索页面容器 */
    .search-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 搜索头部 */
    .search-header {
        margin-bottom: 30px;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .search-title {
        font-size: 28px;
        color: #333;
        margin: 0 0 10px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .search-title .layui-icon {
            color: #1890ff;
            font-size: 32px;
        }

    .search-count {
        font-size: 16px;
        color: #666;
        margin: 0;
    }

    .count-highlight {
        color: #1890ff;
        font-weight: bold;
        font-size: 18px;
    }

    .keyword-highlight {
        color: #FF5722;
        font-weight: bold;
    }

    /* 搜索结果列表 */
    .search-results {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* 搜索结果卡片 */
    .search-result-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }

        .search-result-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 25px rgba(0,0,0,0.12);
        }

    .result-link {
        display: flex;
        text-decoration: none;
        color: inherit;
        min-height: 200px;
    }

    /* 海报区域 */
    .result-poster {
        position: relative;
        width: 180px;
        flex-shrink: 0;
        overflow: hidden;
    }

        .result-poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

    .search-result-card:hover .result-poster img {
        transform: scale(1.05);
    }

    .result-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .search-result-card:hover .result-overlay {
        opacity: 1;
    }

    .play-icon {
        width: 60px;
        height: 60px;
        background: rgba(255,87,34,0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 28px;
    }

    /* 内容区域 */
    .result-content {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .result-header {
        margin-bottom: 15px;
    }

    .result-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin: 0 0 10px 0;
        line-height: 1.3;
    }

    .result-meta {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        color: #666;
    }

        .meta-item .layui-icon {
            font-size: 16px;
            color: #999;
        }

        .meta-item.category .layui-icon {
            color: #1890ff;
        }

        .meta-item.year .layui-icon {
            color: #52c41a;
        }

    .result-description {
        flex: 1;
        margin-bottom: 15px;
    }

        .result-description p {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    .result-footer {
        display: flex;
        justify-content: flex-end;
    }

    .view-detail {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        color: #1890ff;
        font-weight: 500;
        transition: gap 0.3s ease;
    }

    .search-result-card:hover .view-detail {
        gap: 10px;
    }

    /* 无结果状态 */
    .no-results {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .no-results-icon {
        font-size: 80px;
        color: #ddd;
        margin-bottom: 20px;
    }

        .no-results-icon .layui-icon {
            font-size: 80px;
        }

    .no-results-title {
        font-size: 24px;
        color: #333;
        margin: 0 0 15px 0;
    }

    .no-results-desc {
        font-size: 16px;
        color: #666;
        margin: 0 0 30px 0;
    }

    .search-suggestions {
        text-align: left;
        max-width: 400px;
        margin: 0 auto;
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
    }

        .search-suggestions p {
            font-weight: bold;
            color: #333;
            margin: 0 0 10px 0;
        }

        .search-suggestions ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .search-suggestions li {
            padding: 5px 0;
            color: #666;
            position: relative;
            padding-left: 20px;
        }

            .search-suggestions li:before {
                content: "•";
                position: absolute;
                left: 0;
                color: #1890ff;
            }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .search-container

    {
        padding: 10px;
    }

    .search-title {
        font-size: 22px;
    }

    .result-link {
        flex-direction: column;
    }

    .result-poster {
        width: 100%;
        height: 200px;
    }

    .result-content {
        padding: 15px;
    }

    .result-title {
        font-size: 18px;
    }

    }

    @@media (max-width: 480px) {
        .search-title

    {
        font-size: 20px;
    }

    .result-meta {
        gap: 10px;
    }

    .meta-item {
        font-size: 13px;
    }

    }
</style>

@section Scripts {
    <partial name="_MovieSearchScriptsPartial" />
}
